<div class="highlights-container">
    <h4>
        Recommendations 
        <button type="button" class="btn btn-default refresh" ng-click="refreshRecommendations()">
            <span class="glyphicon glyphicon-refresh"></span>
        </button>
    </h4>
    <div ng-repeat="video in all_recommendations track by $index" class="video-container">
        <img ng-src="{{posterURL(video[0])}}" alt="video" class="thumbnail" ng-click='watch(video[0])'/>
        <div>
            <div>
                <progressbar class="progress-striped" value="video[1]" type="{{getType(video[1])}}">
                    {{video[1]}}%
                </progressbar>
            </div>
            <div class="video-title">{{getShowName(video[0].title, 25)}}</div>
            <div class="video-metadata">about <span style="font-weight:bold">{{video[0].topic}}</span></div>
        </div>
        <br ng-show="($index+1)%4==0" />
    </div>
    <div ng-show="all_recommendations.length === 0">
        There are no recommendations. Try changing the recommendation preferences.
    </div>
</div>